<template>
  <div class="page-container" v-loading="loading">
    <page_breadcrumb />
    <div class="flex_row mg_b2 mg_t2">
      <div class="mg_h2">
        {{$tt('label_current_select_country')}}：
        <ex_super_input v-model="countryCode" class="form_input_small" type='select' :attrs="{
          url: '/tms-api/base/TmsPlaceInfoRpc/selectCountry.json',
          filterable: true, urlParams: { typeEnum: 'LINE_AREA' },
          option: { label: it => $formatNameCode(it.countryName, it.countryCode), value: 'countryCode' }
        }" @changeItem="changeCurrent" />
      </div>
      <el-button icon="el-icon-plus" @click="addNew" :disabled="!countryCode">
        {{ $tt('label_logistics_division') }}
      </el-button>
    </div>
    <ex_super_table ref="MainTable" :data="tableData" v-bind="table" >
      <template v-slot:groupCode="{ row }">
        <ex_bottom_tip_item :tip="row.error.groupCode" @click.stop="">
          <el-input :disabled="!row.edit" v-model="row.groupCode" clearable
            :placeholder="$tt('label_zonal_coding')"></el-input>
        </ex_bottom_tip_item>
      </template>
      <template v-slot:subareaName="{ row }">
        <ex_bottom_tip_item :tip="row.error.subareaName" @click.stop="">
          <el-input :disabled="!row.edit" v-model="row.subareaName" clearable
            :placeholder="$tt('label_logistics_division_name')"></el-input>
        </ex_bottom_tip_item>
      </template>
      <template v-slot:postalCodeArea_header="{ model }">
        {{ $tt(model.label) }}
        <el-tooltip placement="top" effect="light">
          <div slot="content" style="line-height: 28px; " v-html="$tt('html_tip_transport_area_edit')">
          </div>
          <el-button type="text" class="el-icon-question"></el-button>
        </el-tooltip>
      </template>
      <template v-slot:postalCodeArea="{ row }">
        <ex_bottom_tip_item :tip="row.error.postalCodeArea" @click.stop="">
          <el-input :disabled="!row.edit" v-model="row.postalCodeArea" type="textarea" autosize
            :placeholder="$tt('label_postCode_match_rule')"></el-input>
        </ex_bottom_tip_item>
      </template>
    </ex_super_table>
  </div>
</template>

<script>

const default_obj = {
  edit: false,
  error: {},
  subareaName: "",
  postalCodeArea: "",
  groupCode: "",
}

export default {
  title: "label_logistics_division_manage",
  data() {

    return {
      loading: false,
      countryCode: '',
      countryName: '',

      tableData: [],
      table: {
        autoFlex: true,
        model: [
          { key: 'groupCode', label: 'label_zonal_coding', width: 300, slot: 'groupCode' },
          { key: 'subareaName', label: 'label_logistics_division_name',  width: 300, slot: 'subareaName' },
          { key: 'postalCodeArea', label: 'label_postCode_match_rule', 'min-width': 180, slot: 'postalCodeArea', slot_header: 'postalCodeArea_header' },
          {
            type: 'operate', width: 160, operate: [
              {
                label: 'label_edit', if: (row) => !row.edit, click: (row, i, list) => {
                  this.editRow(row)
                }
              },
              {
                label: 'label_save', if: (row) => row.edit, click: (row, i, list) => {
                  this.saveRow(row, i, 'checkRow')
                }
              },
              {
                label: 'label_cancel', if: (row) => row.edit, buttonClass: "button_text_warning", click: (row, i, list) => {
                  this.cancelRow(row, i, list)
                }
              },
              {
                label: 'label_delete', if: (row) => row.id && !row.edit, type: "confirm-button", buttonClass: "button_text_danger", confirmButtonType: 'danger',

                url: '/tms-api/base/TmsLogisticsAreaInfoRpc/deleteById.json', message: 'text_confirm_sure_delete',
                params: (v) => { return { id: v.id } }, done: (row, i, data, res) => {
                  data.splice(i, 1)
                }
              }
            ]
          }
        ]
      },
    }
  },
  methods: {
    addNew() {
      const item = _.cloneDeep(default_obj)
      item.new = true
      item.edit = true
      item.countryName = this.countryName
      item.countryCode = this.countryCode
      this.tableData.push(item)
    },
    checkRow(item) {
      item.error = {}
      if (_.isEmpty(item.subareaName)) {
        this.$set(item.error, 'subareaName', this.$t('tip_can_no_empty'))
      }
      if (_.isEmpty(item.postalCodeArea)) {
        this.$set(item.error, 'postalCodeArea', this.$t('tip_can_no_empty'))
      }
      if (_.isEmpty(item.groupCode)) {
        this.$set(item.error, 'groupCode', this.$t('tip_can_no_empty'))
      }
      return _.isEmpty(item.error)
    },
    delete(item, i, list) {
      if (item.id) {
        this.$ajax({
          url: "/tms-api/base/TmsLogisticsAreaInfoRpc/deleteById.json",
          method: 'post',
          data: {
            id: item.id
          },
          loading: true,
          success: (res) => {
            list.splice(i, 1)
          },
          complete: () => {

          }
        })
      } else {
        list.splice(i, 1)
      }
    },
    changeCurrent(e) {
      this.countryName = e.countryName
      this.queryList()
    },

    queryList() {
      if (!this.countryCode || !this.countryName) {
        return this.$message.warning(this.$tt("tip_please_select_country"))
      }
      this.loading = true
      this.tableData = []
      this.$ajax({
        url: "/tms-api/base/TmsLogisticsAreaInfoRpc/selectLabel.json",
        method: 'post', type: 'json',
        data: {
          countryCode: this.countryCode,
        },
        success: (res) => {
          if (res.data && res.data.rows) {
            this.tableData = res.data.rows.map(it => {
              it.edit = false
              it.error = {}
              return it
            })
            if (_.isEmpty(this.tableData)) this.addNew()
          }
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    save(item) {
      this.loading = true
      this.$ajax({
        url: "/tms-api/base/TmsLogisticsAreaInfoRpc/saveOrUpdate.json",
        method: 'post', type: 'json',
        data: {
          logisticsSubareaInfoParamList: [item]
        },
        success: (res) => {
          if (res.data && res.data.rows) {
            let itemData = _.head(res.data.rows)
            if (itemData) {
              item.id = itemData.id

              delete item.new
              delete item.back
              item.edit = false
            }
          }
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    saveRow(row, i, checkMethodName) {
      if (this[checkMethodName](row, i)) {
        this.save(row)
      }
    },
    editRow(row) {
      let back = _.clone(row)
      row.back = back
      this.$set(row, 'edit', true)
    },
    cancelRow(row, i, list) {
      if (row.new) {
        list.splice(i, 1)
      } else {
        list.splice(i, 1, row.back)
      }
    },
    deleteRow(row, i, list) {
      list.splice(i, 1)
    },
  }
}
</script>